import React from 'react';
import { Form, Input, Button, DatePicker, Select, Row, Col } from 'antd';
import styles from './AdvancedFilter.less';

const { RangePicker } = DatePicker;
const { Option } = Select;

@Form.create()
class AdvancedFilter extends React.Component {

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    const { form, handleParamsChange } = this.props;
    form.resetFields();
    handleParamsChange({ key: '', timeStart: '', timeEnd: '' });
  }

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { datatime, searchKey, isOpen } = values;
      const param = {
        searchKey,
        isOpen,
      };
      if (datatime && datatime.length > 0) {
        param.timeStart = datatime[0].format('YYYY-MM-DD HH:mm:ss');
        param.timeEnd = datatime[1].format('YYYY-MM-DD HH:mm:ss');
      } else {
        param.timeStart = "";
        param.timeEnd = "";
      }
      handleParamsChange(param);
      handleSearch();
    });
  }

  onRangeChange = (dates, dateStrings) => {
    const { handleParamsChange } = this.props;
    const param = { timeStart: dateStrings[0], timeEnd: dateStrings[1] };
    handleParamsChange(param);
  }

  onInputChage = (e) => {
    const { handleParamsChange } = this.props;
    handleParamsChange({ searchKey: e.target.value });
  }

  onSelectChage = (value) => {
    const { handleParamsChange } = this.props;
    handleParamsChange({ isOpen: value });
  }

  render() {
    const { form, visible } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`filter__box ${!visible ? 'box__hidden' : ''}`}>
        <Form layout='inline'>
          {/* <div className='filter_form_box'> */}
          <Row className={`filter_form_box ${styles.filter_b_box} ${styles.lbl_w}`}>
            <Col span={12}>
              <Form.Item
                label="创建时间"
                style={{ display: 'flex' }}
              >
                {getFieldDecorator('datatime', {
                  initialValue: '',
                })(
                  <RangePicker
                    format='YYYY-MM-DD HH:mm:ss'
                    className='input__search'
                    onChange={this.onRangeChange}
                    placeholder={['开始时间', '结束时间']}
                    showTime
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="流程编码"
                style={{ display: 'flex' }}
              >
                {getFieldDecorator('searchKey', {
                  initialValue: '',
                })(
                  <Input
                    className='input__search'
                    placeholder="请输入流程编码"
                    onChange={this.onInputChage}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row className={`filter_form_box ${styles.filter_b_box} ${styles.lbl_w}`}>
            <Col span={12}>
              <Form.Item
                label="是否公开流程"
                style={{ display: 'flex' }}
              >
                {getFieldDecorator('isOpen', {
                  initialValue: undefined,
                })(
                  <Select
                    placeholder="请选择筛选类型"
                    onChange={this.onSelectChage}
                    style={{ width: 350 }}
                  >
                    <Option value="">全部</Option>
                    <Option value="1">公开流程</Option>
                    <Option value="0">内部流程筛选</Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <div className='filter_buttons'>
                <Button type="primary" size='small' onClick={this.handleSubmit}>查询</Button>
                <Button size='small' onClick={this.handleReset}>重置</Button>
              </div>
            </Col>
            {/* </div> */}
          </Row>
        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;